<template>
  <div class="button-bar">
    <div class="check-content">
      <check-button class="chck-button" @click.native="checkedClick" :is-checked="isSelectAll"></check-button>
      <span>全选</span>
    </div>
     <div class="price">
      合计 <span>{{totalPrice}}</span>
    </div>
    <div class="calculate">
      结算：{{checkLenght}}
    </div>
  </div>
</template>

<script>
import CheckButton from './CheckButton.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'CheckButtonBar',
  components: {
    CheckButton
  },
  computed: {
    ...mapGetters(['cartList']),
    totalPrice () {
      return '￥' + this.cartList.filter(item => {
        return item.checked
      }).reduce((preValue, item) => {
        return preValue + item.price * item.count
      }, 0).toFixed(2)
    },
    checkLenght () {
      return this.cartList.filter(item => item.checked).length
    },
    isSelectAll () {
      if (this.cartList.length === 0) return false
      return !this.cartList.find(item => !item.checked)
    }
  },
  methods: {
    checkedClick () {
      if (this.isSelectAll) {
        this.cartList.forEach(item => {
          item.checked = false
        })
      } else {
        this.cartList.forEach(item => {
          item.checked = true
        })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.button-bar{
  display: flex;
  background-color: rgb(250, 250, 250);
  border-top: 1px solid rgb(211, 211, 211);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 49px;
  height: 59px;
  .check-content{
    display: flex;
    padding: 0 10px;
    align-items: center;
    .chck-button{
      padding-right: .25rem;
    }
  }
  .price{
    flex: 1;
    line-height: 59px;
    font-size: 18px;
    span{
      color: red;
      font-weight: bold;
      font-size: 20px;
    }
  }
  .calculate{
    margin: auto 10px;
    width: 8rem;
    border-radius: 2rem;
    background-color: rgb(255, 60, 0);
    height: 45px;
    color: #fff;
    font-size: 20px;
    line-height: 45px;
    text-align: center;
  }
}
</style>
